import React from 'react'
import Progress from '../../../../components/afterLoan/Progress'
import UserTitle from '../../../../components/afterLoan/UserTitle'
import RepaymentList from '../../../../components/afterLoan/RepaymentList'
import { Space, DatePicker, Input, Button } from 'antd'
import Information from '../../../../components/afterLoan/Infomation'
import '../../../DoToAll/components/scss/Information.scss'
import '../../../DoToAll/components/scss/TheLoanDetails.scss'

const columns1 = [
    {
        title: '期限',
        dataIndex: 'deadline',
    },
    {
        title: '应还款日',
        dataIndex: 'should_date',
    },
    {
        title: '实际还款日',
        dataIndex: 'real_date',
    },
    {
        title: '本金',
        dataIndex: 'principal',
    },
    {
        title: '利息',
        dataIndex: 'interest',
    },
    {
        title: '管理费',
        dataIndex: 'manage_money',
    },
    {
        title: '还款总额',
        dataIndex: 'all_money',
    },
    {
        title: '减免金额',
        dataIndex: 'credit_amount',
    },
    {
        title: '逾期天数',
        dataIndex: 'overdue_day',
    },
    {
        title: '状态',
        dataIndex: 'status',
    },
    {
        title: '提交人',
        dataIndex: 'submit_person',
    },
    {
        title: '提交时间',
        dataIndex: 'submit_time',
    },
    {
        title: '还款备注',
        dataIndex: 'repayment_remark',
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                {/* <a>查看</a>
                <a>还款录入</a> */}
            </Space>
        )
    }
];
const columns2 = [
    {
        title: '期限',
        dataIndex: 'deadline',
    },
    {
        title: '应还款日',
        dataIndex: 'should_date',
    },
    {
        title: '实际还款日',
        dataIndex: 'real_date',
        render: () => (
            <Space>
                <DatePicker style={{ minWidth: 100 }} />
            </Space>
        )
    },
    {
        title: '本金',
        dataIndex: 'principal',
    },
    {
        title: '利息',
        dataIndex: 'interest',
    },
    {
        title: '管理费',
        dataIndex: 'manage_money',
    },
    {
        title: '还款总额',
        dataIndex: 'all_money',
    },
    {
        title: '减免金额',
        dataIndex: 'credit_amount',
        render: () => (
            <Space>
                <Input style={{ width: 100 }} placeholder='0.00' />
            </Space>
        )
    },
    {
        title: '逾期天数',
        dataIndex: 'overdue_day',
    },
    {
        title: '状态',
        dataIndex: 'status',
    },
    {
        title: '提交人',
        dataIndex: 'submit_person',
    },
    {
        title: '提交时间',
        dataIndex: 'submit_time',
    },
    {
        title: '还款备注',
        dataIndex: 'repayment_remark',
        render: () => (
            <Space>
                <textarea cols="10" rows="2"></textarea>
            </Space>
        )
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                <Button type="default">提交确认</Button>
            </Space>
        )
    }
];

const columns3 = [
    {
        title: '期限',
        dataIndex: 'deadline',
    },
    {
        title: '应还款日',
        dataIndex: 'should_date',
    },
    {
        title: '实际还款日',
        dataIndex: 'real_date',
    },
    {
        title: '本金',
        dataIndex: 'principal',
    },
    {
        title: '利息',
        dataIndex: 'interest',
    },
    {
        title: '管理费',
        dataIndex: 'manage_money',
    },
    {
        title: '还款总额',
        dataIndex: 'all_money',
    },
    {
        title: '减免金额',
        dataIndex: 'credit_amount',
    },
    {
        title: '逾期天数',
        dataIndex: 'overdue_day',
    },
    {
        title: '状态',
        dataIndex: 'status',
    },
    {
        title: '提交人',
        dataIndex: 'submit_person',
    },
    {
        title: '提交时间',
        dataIndex: 'submit_time',
    },
    {
        title: '还款备注',
        dataIndex: 'repayment_remark',
    },
    {
        title: '审核意见',
        dataIndex: 'audit_opinion',
    },
    {
        title: '操作',
        key: 'action',
        render: (text, record) => (
            <Space>
                <Button type="default">确认审核</Button>
            </Space>
        )
    }
];

const data1 = [];
for (let i = 0; i < 3; i++) {
    data1.push({
        deadline: i + 1,
        key: i,
        should_date: '2021-12-29',
        real_date: '2021-12-29',
        principal: (100000 / 100).toFixed(2),
        interest: (26700 / 100).toFixed(2),
        manage_money: (0 / 100).toFixed(2),
        all_money: (126700 / 100).toFixed(2),
        credit_amount: (0 / 100).toFixed(2),
        overdue_day: 0,
        status: '提交审批',
        submit_person: '操作人员A',
        submit_time: '2021-12-29',
        repayment_remark: '客户已转账'
    })
}

const data2 = [];
for (let i = 0; i < 3; i++) {
    data2.push({
        deadline: i + 1,
        key: i,
        should_date: '2021-12-29',
        principal: (100000 / 100).toFixed(2),
        interest: (26700 / 100).toFixed(2),
        manage_money: (0 / 100).toFixed(2),
        all_money: (126700 / 100).toFixed(2),
        overdue_day: 0,
        status: '提交审批',
        submit_person: '操作人员A',
        submit_time: '2021-12-29',
    })
}
const data3 = [];
for (let i = 0; i < 3; i++) {
    data3.push({
        deadline: i + 1,
        key: i,
        should_date: '2021-12-29',
        real_date: '2021-12-29',
        principal: (100000 / 100).toFixed(2),
        interest: (26700 / 100).toFixed(2),
        manage_money: (0 / 100).toFixed(2),
        all_money: (126700 / 100).toFixed(2),
        credit_amount: (0 / 100).toFixed(2),
        overdue_day: 0,
        status: '提交审批',
        submit_person: '操作人员A',
        submit_time: '2021-12-29',
        repayment_remark: '客户已转账',
        audit_opinion: '-'
    })
}

export default function PaymentCheck({ location, history }) {
    console.log("PaymentCheck:", location);
    return (
        <div className='payment-check'>
            <Progress title="还款详情" goBack={history.goBack} />
            <UserTitle name={location.name} type={location.state === 2 ? "还款录入" : "还款信息"} />
            <RepaymentList columns={location.state === 2 ? columns2 : location.state === 3 ? columns3 : columns1} data={location.state === 2 ? data2 : location.state === 3 ? data3 : data1} />
            <Information />
        </div>
    )
}
